<template>
  <!-- 柱状图+折线图 -->
  <ve-histogram
    :data="chartData"
    :y-axis="yAxis"
    :extend="chartExtend"
    :settings="chartSettings"
    :colors="color"
    style="width: 100%; height: 100%"
    ref="table"
  ></ve-histogram>
</template>

<script>
export default {
  props: {
    chartData: {
      type: Object,
      default() {
        return {
          columns: [],
          rows: [],
        };
      },
    },
  },
  data() {
    this.title = {
      text: "折线图+柱状图",
    };
    this.color = ["rgb(255,204,51)", "rgb(0,143,224)", "rgb(217,0,27)"];
    this.chartSettings = {
      showLine: ["达成率"],
      yAxisName: ["数值轴"],
      //
    };
    this.yAxis = {
      show: true,
      splitLine: { show: false }, //去除网格线
      //设置轴线的属性
      axisLabel: {
        color: "red", // 字体
      },
      axisTick: {
        //y轴刻度线
        show: true,
      },
      axisLine: {
        //y轴
        show: true,
      },
    };
    this.chartExtend = {
      series(v) {
        v.forEach((i) => {
          i.barWidth = 15;
          i.barGap = 0;
          i.itemStyle = {
            normal: {
              barBorderRadius: [10, 10, 0, 0],
              label: {
                show: true,
                position: "insideTop ",
                textStyle: {
                  fontSize: "12",
                  colcor: "red",
                },
              },
            },
          };
        });
        return v;
      },
      xAxis(v) {
        v.forEach((i) => {
          i.show = true;
          i.splitLine = { show: false };
          i.axisTick = { show: true };
          i.axisLine = { show: true };
        });
        return v;
      },
    };
    return {
      // chartData: {
      //   columns: ["日期", "高损", "负损", "达标率"],
      //   rows: [
      //     { 日期: "1/3", 高损: 1393, 负损: 1093, 达标率: 1 },
      //     { 日期: "1/2", 高损: 3530, 负损: 3230, 达标率: 0.11 },
      //     { 日期: "1/3", 高损: 2923, 负损: 2623, 达标率: 1200 },
      //     { 日期: "1/4", 高损: 1723, 负损: 1423, 达标率: 1300 },
      //     { 日期: "1/5", 高损: 3792, 负损: 3492, 达标率: 1600 },
      //     { 日期: "1/6", 高损: 4593, 负损: 4293, 达标率: 2000 },
      //   ],
      // },
    };
  },
  watch: {
    chartData: {
      handler: function (newnew, oldold) {
        console.log(JSON.stringify(newnew));
        this.$nextTick(() => {
          // this.$refs.table.doLayout();
          this.$refs.table.echarts.resize();
          // console.log('渲染完成时间', new Date());
        });
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>